<template>
  <div>
    <!--头部-->
    <top></top>
    <!--导航-->
    <navs></navs>

      <!--核心内容start-->

    <section class="meetings-page" id="meetings" >
      <div class="container"  v-for="active in activePage">
        <div class="row" v-if="active!=null">
          <div class="col-lg-12">
            <div class="row">
              <div class="col-lg-12">
                <div class="meeting-single-item">
                  <div class="thumb">
                    <div class="date">

                      <img :src="'http://localhost:9999/images/'+active.images" width="130px" height="130px">

                    </div>

                  </div>
                  <div class="down-content">
                    <a href="meeting-details.html"><h4>活动主题</h4></a>
                    <p>{{active.name}}</p>
                    <p class="description">
                      {{active.ctInfo}} </p>
                    <div class="row">
                      <div class="col-lg-4">
                        <div class="hours">
                          <h5>时间</h5>
                          <p>{{active.acTime}}</p>

                        </div>
                      </div>
                      <div class="col-lg-4">
                        <div class="location">
                          <h5>地点</h5>
                          <p>{{active.ctAddress}}</p>
                        </div>
                      </div>
                      <div class="col-lg-4">
                        <div class="book now">
                          <h5>主持人</h5>
                          <p>{{active.host}}</p>
                        </div>
                      </div>

                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>


        <br />
        <el-divider></el-divider>
        <br />
      </div>

    </section>
    <section class="contact-us">

      <div class="container">
        <div class="row">
          <div class="col-lg-9 align-self-center">
            <div class="row">
              <div class="col-lg-12">


                <el-form id="contact"  ref="dataForm" :rules="rules" :model="temp" v-if="temp.teamId!=teamId">
                  <div class="row">
                    <div class="col-lg-12">
                      <h2>请加入我们的社团</h2>
                    </div>
                    <div class="col-lg-4">
                      <fieldset>
                        <el-form-item prop="realname">
                        <input v-model="temp.realname"   type="text"  placeholder="姓名..." required="" readonly>
                        </el-form-item>
                      </fieldset>
                    </div>
                    <div class="col-lg-4">
                      <fieldset>
                        <input v-model="temp.sex" type="text"  placeholder="性别"  required="" readonly>
                      </fieldset>
                    </div>
                    <div class="col-lg-4">
                      <fieldset>
                        <el-form-item prop="tel">
                        <input v-model="temp.tel"  type="text"  placeholder="电话" required="" readonly>
                        </el-form-item>
                      </fieldset>
                    </div>

                    <div class="col-lg-4">
                      <fieldset>
                        <el-form-item prop="email">
                        <input v-model="temp.email" type="text" pattern="[^ @]*@[^ @]*" placeholder="邮箱..." required="" readonly>
                        </el-form-item>
                      </fieldset>
                    </div>
                    <div class="col-lg-4">
                      <fieldset>
                        <input v-model="temp.address" type="text"  placeholder="地址..." required="" readonly>
                      </fieldset>
                    </div>
                    <div class="col-lg-4">
                      <fieldset>
                        <input v-model="temp.weixin" type="text" placeholder="微信...*" required="" readonly>
                      </fieldset>
                    </div>

                    <div class="col-lg-12">
                      <fieldset>
                        <textarea v-model="temp.content" type="text" class="form-control" id="message" placeholder="申请内容..." required=""></textarea>
                      </fieldset>
                    </div>



                    <div class="col-lg-12">
                      <fieldset>
                        <button type="submit" id="form-submit" class="button" @click="addSave()">加入社团</button>
                      </fieldset>
                    </div>

                  </div>
                </el-form>





              </div>
            </div>
          </div>


          <div class="col-lg-3" v-if="temp.teamId!=teamId">
            <div class="right-info">
              <ul>
                <li>
                  <h6>社团类型名称</h6>
                  <span>{{team.typeInfo.name}}</span>
                </li>
                 <br/>
                <li>
                  <h6>社团名称</h6>
                  <span>{{team.name}}</span>
                </li>
                <br/>
                <li>
                  <h6>社长姓名</h6>
                  <span>{{team.userInfo.username}}</span>
                </li>
                <br/>
                <li>
                  <h6>创建时间</h6>
                  <span>{{team.createTime}}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

    </section>


    <foot></foot>

    <!--核心内容end-->



  </div>
</template>

<script>
  import top from '../../qdutils/top/top'
  import navs from '../../qdutils/navs/index'
  import foot from '../../qdutils/footer/index'
  import request from "@/utils/request";
  export default {
    name: "index",
    components: {top, navs, foot},

    data() {

      return {
        acitity: {},
        activePage: {},
        team: {},
        temp:{
          realname:'',
          tel:'',
          email:'',
          address:'',
          qq:'',
          weixin:'',
          content:''
        },
        teamId:'',

        rules: {
          realname: [{ required: true, message: '请填写正确的姓名格式(3个长度以上)', trigger: 'blur' }],
          tel:[{ required: true, message: '请填写电话', trigger: 'blur' },{
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }],
          email:[{ required: true, message: '请填写邮箱', trigger: 'blur' },{
            pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/,
            message: "请输入正确的邮箱",
            trigger: "blur"
          }]

        }

      }
    },
    created() {
      const teamId = this.$route.query.teamId;//社团的id
      this.teamId=teamId;
      this.getAcitityInfoByTeamId(teamId);
      this.selectActiveByTeamId(teamId);
      this.getTeamById(teamId);
      this.getUserInfo();
    },
    methods: {
      selectActiveByTeamId(teamId){
        request('activity/selectActiveByTeamId?id=' + teamId).then(res => {
          this.activePage = res.data;
        })
      },
      getAcitityInfoByTeamId(teamId) {
        request('activity/findByTeamId?id=' + teamId).then(res => {
          this.acitity = res.data;
        })
      },
      getTeamById(teamId) {
        request('team/findTeamById?id=' + teamId).then(res => {
          this.team = res.data;
        })
      },
      getUserInfo() {
        request('teamuser/getTeamUserByToken').then(res => {
          this.temp = res.data;
        })
      },
      //添加
      addSave(temp) {
        this.temp.teamId = this.teamId;
        //加验证规则
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {

            //向后端发送请求，实现添加功能
            request.post('applyInfo/addInfo', this.temp).then(res => {
              if (res.code == 20000) {
                //关闭弹出框
                this.$alert(res.msg);
              } else {
                this.$alert("申请失败...");
              }
            })

          }
        })

     }

    }
  }
</script>

<style scoped>
  @import "../../../vendor/bootstrap/css/bootstrap.min.css";
  @import "../../../assets/css/templatemo-edu-meeting.css";
</style>
